<template>
    <div class="container">
        <el-select placeholder="请选择班级" v-model="selectedClass">
            <el-option v-for="classInfo in classInfoList" :key="classInfo.value" :label="classInfo.label"
                :value="classInfo.value" />
        </el-select>
        <template v-if="selectedClass">
            <el-card v-for="workInfo in workInfoList" :key="workInfo.workName" class="classinfo-list">
                <template #header>
                    <span style="font-size: 24px;">
                        {{ workInfo.workName }}
                    </span>
                </template>
                <el-row>
                    <el-col :span="12">
                        <div class="statistic-card">
                            <el-statistic :value="workInfo.workCompletion">
                                <template #title>
                                    完成率
                                </template>
                                <template #suffix>
                                    /{{ workInfo.total }}
                                </template>
                            </el-statistic>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="statistic-card">
                            <template v-if="workInfo.avarageGrade >= 80">
                                <el-statistic :value="workInfo.avarageGrade" :precision="1" value-style="color:green">
                                    <template #title>
                                        平均分数
                                    </template>
                                </el-statistic>
                            </template>
                            <template v-else-if="workInfo.avarageGrade >= 50 && workInfo.avarageGrade < 80">
                                <el-statistic :value="workInfo.avarageGrade" :precision="1" value-style="color:orange">
                                    <template #title>
                                        平均分数
                                    </template>
                                </el-statistic>
                            </template>
                            <template v-else>
                                <el-statistic :value="workInfo.avarageGrade" :precision="1" value-style="color:red">
                                    <template #title>
                                        平均分数
                                    </template>
                                </el-statistic>
                            </template>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </template>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const selectedClass = ref()
const classInfoList = [
    {
        value: '计算机技术与科学1班',
        label: '计算机技术与科学1班',
    },
    {
        value: "计算机技术与科学2班",
        label: "计算机技术与科学2班",
    },
    {
        value: "软件工程1班",
        label: "软件工程1班",
    },
    {
        value: "软件工程2班",
        label: "软件工程2班",
    },
]

const workInfoList = [
    {
        workName: "作业1",
        workCompletion: 90,
        avarageGrade: 83.3,
        total: 123,
    },
    {
        workName: "作业2",
        workCompletion: 92,
        avarageGrade: 90.0,
        total: 100,
    },
    {
        workName: "作业3",
        workCompletion: 70,
        avarageGrade: 78.2,
        total: 89,
    },
    {
        workName: "作业4",
        workCompletion: 98,
        avarageGrade: 45.5,
        total: 110,
    }
]
</script>

<style scoped>
.container {
    padding: 20px 0;
}

.classinfo-list {
    margin-top: 20px;
}
</style>